<template>
  <el-container class="full-container">
    <el-aside width="220px" class="aside-left">
      <div class="aside-header">
        <span>服务器</span>
        <el-link :underline="false" type="primary" icon="el-icon-link" @click="viewPhysical">服务器列表</el-link>
      </div>
      <ul class="aside-left-ul">
        <li
          v-for="(item) in northBound"
          :key="item.id"
          :class="{'active': northBoundId===item.id}"
          @click="northBoundClick(item)"
        >
          <span :title="item.id+'-'+item.name">{{ item.id }}-{{ item.name }}</span>
          <ol>
            <li
              v-for="equipment in item.equipments"
              :key="equipment.id"
              :class="{'selected':equipment.id===equipmentId}"
              @click.stop="equipmentClick(item.id, equipment.id)"
            >
              {{ equipment.name }}
            </li>
          </ol>
        </li>
      </ul>
    </el-aside>
    <el-container>
      <el-main v-loading="isSubmitLoading" class="main-content">
        <div class="tool-control">
          <el-button
            :loading="isSubmitLoading"
            :disabled="statistics.managerConnectionStatus!==1 || statistics.configSyncStatus!==1"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            icon="el-icon-refresh"
            @click="syncConfigSetting()"
          >上传配置
          </el-button>
        </div>
        <upload-service
          v-if="target==='first'"
          @save="getNorthboundWithEquipment"
        ></upload-service>
        <north-data-element
          v-if="target==='second'"
          ref="northDataElement"
          @save="getNorthboundWithEquipment"
        ></north-data-element>
        <data-element
          v-if="target==='third'"
          ref="dataElement"
          @save="getNorthboundWithEquipment"
        ></data-element>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import { getNorthboundWithEquipment } from "@/api/northbound";
  import { getStatistics, applyConfigToNorth } from "@/api/gateway";
  import UploadService from "./components/UploadService";
  import NorthDataElement from "./components/NorthDataElement";
  import DataElement from "./components/DataElement";

  export default {
    components: {
      'upload-service': UploadService,
      'north-data-element': NorthDataElement,
      'data-element': DataElement
    },
    data() {
      return {
        northBound: [],
        northBoundId: undefined,
        equipmentId: undefined,
        statistics: {},
        target: 'first',
        isSubmitLoading: false
      };
    },
    computed: {},
    created() {
      this.getNorthboundWithEquipment();
    },
    methods: {
      getStatistics() {
        this.isSubmitLoading = true;
        getStatistics().then(result => {
          this.statistics = result;
          this.isSubmitLoading = false;
        });
      },
      // 获取北向信息
      getNorthboundWithEquipment() {
        getNorthboundWithEquipment().then(result => {
          this.northBound = result;
        });
        this.getStatistics();
      },
      viewPhysical() {
        this.target = 'first';
        this.northBoundId = undefined;
        this.equipmentId = undefined;
      },
      northBoundClick(item) {
        this.target = 'second';
        this.northBoundId = item.id;
        this.$nextTick(() => {
          this.$refs['northDataElement'].init(item.id);
        })
      },
      equipmentClick(northId, equipId) {
        this.target = 'third';
        this.equipmentId = equipId;
        this.$nextTick(() => {
          this.$refs['dataElement'].init(northId, equipId);
        })
      },
      syncConfigSetting() {
        this.$confirm("该操作将上传配置， 是否继续?", "确定上传配置吗？", { type: "warning" })
          .then(() => {
            const loading = this.$loading({
              lock: true,
              text: '请稍候...',
              spinner: 'el-icon-loading',
              background: 'rgba(255, 255, 255, 0.7)'
            });
            applyConfigToNorth()
              .then(() => {
                this.$message({
                  message: "上传配置成功",
                  type: "success"
                });
                loading.close();
                this.getStatistics();
              })
              .catch(() => {
                loading.close();
              });
          })
          .catch(() => {

          });
      },
    }
  };
</script>

<style lang="scss" scoped>
  .full-container {
    min-height: calc(100vh - 50px);
  }

  .aside-left {
    margin-bottom: 0;
  }

  .aside-header {
    display: flex;
    align-items: center;
    font-weight: bold;

    span {
      flex: 1;
    }

    &:before {
      content: '';
      display: inline-block;
      margin-right: 5px;
      width: 4px;
      height: 16px;
      background-color: #000000;
    }
  }

  .aside-left-ul {
    margin: 0;
    list-style: none;
    padding-left: 0;

    & > li {
      position: relative;
      line-height: 40px;
      cursor: pointer;
      border-bottom: 1px dashed #ccc;
      padding-left: 20px;

      &:before {
        position: absolute;
        top: 15px;
        z-index: 1;
        left: 0;
        content: '';
        width: 10px;
        height: 10px;
        border: 1px solid #000;
      }

      &:after {
        position: absolute;
        top: 12px;
        z-index: 1;
        right: 0;
        content: "\E6E0";
        font-family: 'element-icons' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: baseline;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      &.active {
        color: #1890ff;
        border-color: #1890ff;
        border-bottom-style: solid;

        &:before {
          background-color: #1890ff;
          border-color: #1890ff;
        }

        &:after {
          transform: rotate(90deg);
        }

        ol {
          display: block;
        }
      }

      & > span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    ol {
      display: none;
      position: relative;
      padding-left: 0px;
      list-style: none;

      &:before {
        content: '';
        position: absolute;
        left: -15px;
        top: -10px;
        bottom: 19px;
        border-left: 1px dashed #1890ff;
      }

      & > li {
        position: relative;
        font-size: 14px;
        color: #333333;

        &.selected {
          color: #1890ff;
        }

        &:before {
          content: '';
          position: absolute;
          left: -13px;
          top: 20px;
          width: 10px;
          border-bottom: 1px dashed #1890ff;
        }

      }
    }
  }

  .main-content {
    position: relative;

    .tool-control {
      position: absolute;
      top: 12px;
      right: 20px;
      z-index: 1;
      justify-content: flex-start;
      div.filter-item{
        display: inline-block;
        margin-right: 10px;
      }
    }
  }

  .aside-bottom {
    text-align: center;
    margin-top: 8px;

    button {
      width: 100%;
      display: block;
    }
  }
</style>
